<template>
  <div>
    <div>
      <h3>商品清单如下</h3>
      <ul>
        <li v-for="(item,index) in arr" :key="index">
          {{item.shopName}}---{{item.price}}元/份</li>
      </ul>
    </div>
    <div>
      <h3>请选择购买的数量</h3>
      <Myfood 
      @chang-num="item.count=$event"
      :obj="item"
      v-for="(item,index) in arr" :key="index"></Myfood>
    </div>
    <h3>总价：{{totalPrice}}</h3>
  </div>
</template>

<script>
import Myfood from './components/my-food.vue'
export default {
  data(){
    return {
     arr: [
    {
        "shopName": "可比克薯片",
        "price": 5.5,
        "count": 0
    },
    {
        "shopName": "草莓酱",
        "price": 3.5,
        "count": 0
    },
    {
        "shopName": "红烧肉",
        "price": 55,
        "count": 0
    },
    {
        "shopName": "方便面",
        "price": 12,
        "count": 0
    }
]
    }
  },
  components:{
    Myfood,
  },
  methods:{
    // fn(value){
    //   console.log(1)
    // }
  },
  computed:{
    totalPrice(){
      return this.arr.reduce((sum,item)=>sum + item.count * item.price,0)
    }
  }
}
</script>

<style scoped>

</style>